<template>
  <div class="message">
    <el-container style="height: 65%;">
      <!-- <el-aside>111</el-aside> -->
      <el-main>
        <!-- 顶部工具栏 -->
        <!-- <top-tool-bar></top-tool-bar> -->
        <!-- 地图显示 -->
        <!-- <map-view></map-view> -->
        <div class="allmap" id="allmap"></div>
      </el-main>
      <el-aside style="width: 390px; padding: 5px">
        <vdr class="vdr" :w="200" :h="500" @resizing="resizeWidth" :draggable="false">
          <el-table
        :data="screeningData"
        height="500"
        style="width: 100%"
      >
        <el-table-column sortable prop="VID" label="姓名" align="center" width="80"></el-table-column>
        <el-table-column sortable prop="COMMUNITY_NAME" label="报警类型" align="center" width="150"></el-table-column>
        <el-table-column prop="VILLAGE_NAME" label="报警时间" align="center" width="150"></el-table-column>
      </el-table>
        </vdr>
      </el-aside>
    </el-container>
    <el-footer style="width: 1700px;">
      <vdr class="vdr" :w="200" :h="50" @resizing="resize" :draggable="false">
        <div ref="footerTitle" class="footer_title">人员信息监控列表</div>
        <el-table
        :data="screeningData"
        height="260"
        
        style="width: 100%;"
      >
        <el-table-column sortable prop="VID" label="编号" align="center" width="80"></el-table-column>
        <el-table-column sortable prop="COMMUNITY_NAME" label="社区名称" align="center" width="150"></el-table-column>
        <el-table-column prop="VILLAGE_NAME" label="小区名称" align="center" width="150"></el-table-column>
        <el-table-column prop="NAME" label="姓名" align="center" width="80"></el-table-column>
        <el-table-column prop="WORKTYPE" label="工种" align="center" width="80"></el-table-column>
        <el-table-column prop="PHONE" label="电话" align="center" width="120"></el-table-column>
        <el-table-column prop="Location" label="负责垃圾点位" align="center" width="150"></el-table-column>
        <el-table-column sortable prop="ORIENTATION_TIME" label="最终定位时间" align="center" width="180"></el-table-column>
        <el-table-column prop="states" label="状态" align="center" :formatter="formatter" width="70"></el-table-column>
        <el-table-column sortable prop="ATTENDTIME" label="打卡状态" align="center" width="210"></el-table-column>
        <el-table-column prop="LONGITUDE" label="经度" align="center"></el-table-column>
        <el-table-column prop="LATITUDE" label="纬度" align="center"></el-table-column>
      </el-table>
      </vdr>
    </el-footer>
    <!-- <div class="allmap" id="allmap"></div>
    <div>
      <el-table
        :data="screeningData"
        style="width: 100%"
      >
        <el-table-column sortable prop="VID" label="编号" align="center" width="80"></el-table-column>
        <el-table-column sortable prop="COMMUNITY_NAME" label="社区名称" align="center" width="150"></el-table-column>
        <el-table-column prop="VILLAGE_NAME" label="小区名称" align="center" width="150"></el-table-column>
        <el-table-column prop="NAME" label="姓名" align="center" width="80"></el-table-column>
        <el-table-column prop="WORKTYPE" label="工种" align="center" width="80"></el-table-column>
        <el-table-column prop="PHONE" label="电话" align="center" width="120"></el-table-column>
        <el-table-column prop="Location" label="负责垃圾点位" align="center" width="150"></el-table-column>
        <el-table-column sortable prop="ORIENTATION_TIME" label="最终定位时间" align="center" width="180"></el-table-column>
        <el-table-column prop="states" label="状态" align="center" :formatter="formatter" width="70"></el-table-column>
        <el-table-column sortable prop="ATTENDTIME" label="打卡状态" align="center" width="210"></el-table-column>
        <el-table-column prop="LONGITUDE" label="经度" align="center"></el-table-column>
        <el-table-column prop="LATITUDE" label="纬度" align="center"></el-table-column>
      </el-table>
    </div> -->
    <!-- <iframe id="mainFrame" src="" frameborder="0"></iframe> -->
  </div>
</template>

<script>
import markerIcon_rubbish from '@/assets/img/t.png'
export default {
  data () {
    return {
      map: null,
    screeningData:[],
    dataRubbishBoxsList:[],
    }
  },
   mounted () {
    
    this.initMap();

  },
  created () {
  },
  methods: {
    async getBoxList () {
var url = 'http://111.160.78.62:9943/GarbagePointsBDEApi/BasicData/GetRubbishPointsApi?ClientNo=&Level=%E8%A1%8C%E6%94%BF%E5%8C%BA'
      const { data } = await this.$axios.get(url)




      // var url = `/BasicData/GetRubbishPointsApi?ClientNo=&Level=行政区`; // zxHTTP
      // let { data } = await this.$Http.get(url)
      this.createMarker_Box(data)
    },
    // 创建标记点
    createMarker_Box (val) {
      val.forEach(item => {
      var point = new BMap.Point(item.LONGITUDE, item.LATITUDE);
      var myIcon = new BMap.Icon(markerIcon_rubbish, new BMap.Size(40, 40));
      var marker = new BMap.Marker(point, { icon: myIcon });
      var label = new BMap.Label(item.NAME, { offset: new BMap.Size(-10, 40) });
      marker.setLabel(label);
      marker.disableMassClear()
      this.addInfoWindow(marker, item);
      this.map.addOverlay(marker);
      })
    },
    addInfoWindow (marker, item) {
      var sContent = '<iframe src="infowindow.html?RubbishPointID=' + item.ID + '" width=400 height=220 frameborder=0 scrolling=no></iframe>'
      var height = 200 + item.boxs.legend * 20
      item.boxs.forEach(item => {
        // {"BOX_ID":18,"RUBBISH_ID":180,"BOX_NAME":"5","BOX_TYPE":"3","SIZE":"500","PHOTO":"","HOTEL_ID":null}
        // {"BOX_ID":19,"RUBBISH_ID":181,"BOX_NAME":"6","BOX_TYPE":"3","SIZE":"600","PHOTO":"","HOTEL_ID":null}
        var stringType = item.BOX_TYPE
        if (stringType === '1') {
          stringType = '可回收垃圾'
        }
        if (stringType === '2') {
          stringType = '厨余垃圾'
        }
        if (stringType === '3') {
          stringType = '有害垃圾'
        }
        if (stringType === '4') {
          stringType = '其他垃圾'
        }
        sContent += "<p style='margin:0;text-indent:1em'>" + stringType + "桶：" + item.SIZE + "L" + "</p>"
      })
      var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: height });  // 创建信息窗口对象
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
    },
    initMap () {
      this.map = new BMap.Map('allmap')
      // var City = '太原'
      // var point = new BMap.Point(112.593887,37.866154) // 创建点坐标
      // var City = '北京'
      // var point = new BMap.Point(116.404, 39.915) // 创建点坐标
      // var City = '福州'
      // var point = new BMap.Point(119.31864, 26.07052) // 创建点坐标
      var City = '天津'
      var point = new BMap.Point(117.36027, 39.084964) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      let _this = this
      // this.map.addEventListener("click", function (type, target, point, pixel, overlay) {
      //   _this.MouseEvent.isShow = false
      // });
      //       this.map.addEventListener("rightclick", function (e) {
      //         var distance = _this.contrastDistance(e.point)
      //         if (distance < 10) {
      // _this.MouseEvent.left = oEvent.clientX
      //             _this.MouseEvent.top = oEvent.clientY - 26 * 2
      //             _this.MouseEvent.isShow = true
      //         }
      //       });
      this.getBoxList();
    },
    initFrame () {
      setTimeout(() => {
        var cod = localStorage.getItem('codes')
        console.log(localStorage.getItem('STREET_NO'))
        // var cod = '00000'
        // var url = http://111.160.78.62:4462/cleaner?StreetNo=35&ClientNo=01900 // 启迪
// var url = http://111.160.78.62:4471/cleaner?StreetNo=35&ClientNo=01900 // 太原
// var url = http://111.160.78.62:4474/cleaner?StreetNo=35&ClientNo=01900 // 福建
        // var url = 'http://111.160.78.62:4462/cleaner?StreetNo=35&ClientNo=01900'
        var url = 'http://localhost:8081/cleaner?StreetNo=35&ClientNo=01900'
        // /cleaner?StreetNo=' + localStorage.getItem('STREET_NO') + '&ClientNo='+ localStorage.getItem('clentno')
        document.getElementById('mainFrame').src = url
      }, 100)
    }
  }
}
</script>

<style>
.message,
iframe {
  width: 100%;
  height: 100%;
}
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.el-footer {
  width: 100%;
  min-height: 200px !important;
  
}
.footer_title {
    line-height: 30px;
    background-color: #07c4a8;
    color: #fff;
    cursor: s-resize;
    padding-left: 20px;
    font-weight: 600;
  }
.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
</style>
